
<template>
  <div>
    <!-- teleport 瞬移组件
    to属性 可以将组件内容  生成到其他dom结构 -->
      <teleport to='#mydialog' >
          <div v-if="flag" class="cover">
              我是弹出层
          </div>
      </teleport>
  </div>
</template>
<script>
// Teleport 提供了一种干净的方法, 
// 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示


import {defineComponent} from 'vue'
export default defineComponent({
  props:["flag"],
  setup(){
    
  }
})
</script>
<style lang="less">
  .cover{
    width: 50%;
    height: 50%;
    background:rgba(0,0,0,0.5);
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
</style>